import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router';
require("./home.css");

class ChangePwd extends React.Component{

    constructor() {
        super();
        const userSessionStorage = JSON.parse(window.sessionStorage.getItem('userStorage'));
        this.state = {
            newPwd: '',
            oldPwd:userSessionStorage.user_password,
            repeatPwd:'',
            loginID: userSessionStorage.user_id,

        };
    }

    handleSubmit(e){
        e.preventDefault();
        const userSessionStorage = JSON.parse(window.sessionStorage.getItem('userStorage'));
        const changePwd = ReactDOM.findDOMNode(this.refs.changePwd).value.trim();
        const oldPwd = ReactDOM.findDOMNode(this.refs.oldPwd).value.trim();
        const repeatPwd = ReactDOM.findDOMNode(this.refs.repeatPwd).value.trim();
        const changePwdForm = ReactDOM.findDOMNode(this.refs.changePwdForm);
        console.log(changePwd);
        console.log(oldPwd);
        console.log(repeatPwd);

        if(oldPwd == ""){
            alert("请输入原密码！");
        }
        else if(oldPwd != userSessionStorage.user_password){
            alert("原密码错误，请重新输入！");
        }
        else if(changePwd == ""){
            alert("请输入新密码！");
        }
        else if(oldPwd == changePwd){
            alert("输入的新密码与原密码相同，请重新输入！");
        }
        else if(repeatPwd == ""){
            alert("请输入确认密码！");
        }
        else if(changePwd !== repeatPwd){
            alert("两次密码输入不一致，请重新输入！");
        }
        else {
            this.uploadData();
            // changePwdForm.reset();
        }
    }


    uploadData(){
        fetch("http://121.196.202.247:1010/tuser/?user_id="+this.state.loginID+"&user_password="+this.state.oldPwd+"&new_password="+this.state.newPwd, {
            method: "GET",
            headers: {
                'Accept': 'application/json',
                "Content-Type": "application/json; charset=utf-8"
            }}) .then((response) => response.json())
            .then((responseText) => {
                console.log(responseText+"aaaaaa");
                console.log(JSON.stringify(responseText)+"aaaaaa");
                if(responseText.success_password == 'password changed successfully!'){
                    window.sessionStorage.setItem('userStorage',JSON.stringify(responseText));
                    console.log(window.sessionStorage.getItem('userStorage'));
                    window.localStorage.clear();
                    // if(window.localStorage.getItem('userStorage') != null)
                    // window.localStorage.setItem('userStorage',JSON.stringify(responseText));
                    alert("密码修改成功！下次请用新密码登录！");
                }
            }).catch((error) => {alert(error+"连接职信服务器失败，请查看网络连接状态并刷新页面！")});
    }


    handleChange1(e){
        this.setState({newPwd: e.target.value});
    }
    handleChange2(e){
        this.setState({repeatPwd: e.target.value});
    }



    render(){
        return(
            <form className="change_pwd" onSubmit={function (e) {this.handleSubmit(e)}.bind(this)} ref="changePwdForm">
                <p>若您确认要修改密码，请填写以下信息：</p>
                <p>原密码：&nbsp;&nbsp;&nbsp;<input type="text" ref="oldPwd"/></p>
                <p>新密码：&nbsp;&nbsp;&nbsp;<input type="text" ref="changePwd" value={this.state.newPwd} onChange={this.handleChange1.bind(this)}/></p>
                <p>确认密码：<input type="text" ref="repeatPwd" value={this.state.repeatPwd} onChange={this.handleChange2.bind(this)}/></p>
                <input type="submit" value="提交" className="change_pwd_submit"/>
                <Link to='/home_me_hr'><input type="button" value="返回" className="change_pwd_back"/></Link>
            </form>
        );
    }
}

export default ChangePwd;